<script setup>
import ChannelSelect from './components/ChannelSelect.vue'
import ArticleEdit from './components/ArticleEdit.vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'

// 请求文章列表
import { artGetListService } from '@/api/article'
// 格式化时间
import { formatTime } from '@/utils/format'

const articleList = ref([])

// 下拉多选框父子通信
const params = ref({
  pagenum: 1,
  pagesize: 3,
  cate_id: '',
  state: ''
})

// 获取文章编辑dom元素
const articleEditRef = ref()
// 编辑
const onEditArticle = (row) => {
  articleEditRef.value.open(row)
}
// 添加
const onAddArticle = () => {
  articleEditRef.value.open({})
}
// 删除
const onDeleteArticle = (row) => {
  console.log(row)
}

// 文章总数
const total = ref(0)
// 加载效果
const loading = ref(false)

// 渲染表格
const getArticleList = async () => {
  loading.value = true
  const { data } = await artGetListService(params.value)
  total.value = data.total
  articleList.value = data.data
  loading.value = false
}
onMounted(() => getArticleList())

// 文章检索
const onSearch = () => {
  params.value.pagenum = 1
  getArticleList()
}

// 重置下拉选项
const onReset = () => {
  params.value.pagenum = 1
  params.value.cate_id = ''
  params.value.state = ''
  getArticleList()
}


// 控制分页栏条数变化
const onSizeChange = (size) => {
  params.value.pagenum = 1
  params.value.pagesize = size
  getArticleList()
}
// 控制分页栏页面切换
const onCurrentChange = (page) => {
  params.value.pagenum = page
  getArticleList()
}

// 发布/编辑文章成功
const onSuccess = (type) => {
  if (type === 'add') {
    params.value.pagenum = Math.ceil((total.value + 1) / (params.value.pagesize))
  }
  getArticleList()
}

// 文章预览组件
import ArticleView from './components/ArticleView.vue'
const showView = ref(false)

</script>

<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button type="primary" @click="onAddArticle">发布文章</el-button>
    </template>

    <el-form :inline="true">
      <el-form-item label="文章分类:">
        <!-- 下拉菜单组件 -->
        <channel-select v-model="params.cate_id"></channel-select>
        <!-- vue3中v-model是v-model:modelValue的简写,:modelValue也可以自定义,但子组件也需要一一对应,事件名也需要修改 -->
        <!-- <channel-select v-model:modelValue="params.cate_id"></channel-select> -->
      </el-form-item>
      <el-form-item label="发布状态:">
        <el-select v-model="params.state" style="width: 240px;">
          <el-option label="发布" value="已发布"></el-option>
          <el-option label="存稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" type="primary">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="articleList">
      <el-table-column width="160" label="文章标题" prop="title">
        <template #default="{ row }">
          <el-link @click="showView = true" :underline="false" type="primary">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="分类" prop="cate_name"></el-table-column>
      <el-table-column label="发布时间" prop="pub_date">
        <!-- row 就是绑定一行的数据,同行每个单元格的row都是统一的,pub_date -->
        <template #default="{ row }">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button circle size="large" :icon="Edit" @click="onEditArticle(row)" type="primary"></el-button>
          <el-button circle size="large" :icon="Delete" @click="onDeleteArticle(row)" type="danger"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页部分 -->
    <el-pagination v-model:current-page="params.pagenum" v-model:page-size="params.pagesize"
      :page-sizes="[1, 2, 3, 5, 10]" size="small" :background="true" layout="jumper, total, sizes, prev, pager, next"
      :total="total" style="margin-top: 25px; justify-content: flex-end;" @size-change="onSizeChange"
      @current-change="onCurrentChange" />

    <!-- 文章编辑或发布 -->
    <article-edit ref="articleEditRef" @success="onSuccess"></article-edit>

    <article-view v-model="showView"></article-view>
  </page-container>
</template>